<nz-layout>
  <nz-affix>
    <nz-header>
      <div class="logo"></div>
      <ul nz-menu nzTheme="dark" nzMode="horizontal" style="line-height:64px">
        <li nz-menu-item><a href="#">首页</a></li>
        <li nz-menu-item><a href="#">团供</a></li>
        <li nz-menu-item><a href="#">在线教育</a></li>
        <li nz-menu-item><a href="#">助学读物</a></li>
        <li nz-menu-item><a href="#">教育装备</a></li>
        <li nz-menu-item><a href="#">电子读物</a></li>
        <li nz-menu-item><a href="#">文体用品</a></li>
      </ul>
    </nz-header>
  </nz-affix>
  <hr />
  <nz-layout>
    <nz-sider nzWidth="200">
      <ul nz-menu nzMode="inline" style="height:100%;background-color:#fff">
        <li nz-submenu>
          <span title><i class="anticon anticon-user"></i>content</span>
          <ul>
            <li nz-menu-item><a href="#">content</a></li>
            <li nz-menu-item><a href="#">content</a></li>
            <li nz-menu-item><a href="#">content</a></li>
            <li nz-menu-item><a href="#">content</a></li>
          </ul>
        </li>
        <li nz-menu-item><a href="#">content</a></li>
        <li nz-menu-item><a href="#">content</a></li>
        <li nz-menu-item><a href="#">content</a></li>
      </ul>
    </nz-sider>
    <nz-layout style="padding:0 24px 24px;">
      <nz-breadcrumb>
        <nz-breadcrumb-item><a href="#">团供</a></nz-breadcrumb-item>
        <nz-breadcrumb-item><a href="#">单位</a></nz-breadcrumb-item>
        <nz-breadcrumb-item><a href="#">工作购书</a></nz-breadcrumb-item>
      </nz-breadcrumb>
      <nz-content class="content" style="margin:16px 0;background-color:#ffffff;padding:50px;">
        <div nz-row>
          <div nz-col nzSpan="12">
            <!--<nz-input-group nzAddOnBefore="￥" nzAddOnAfter=".00">
              <input nz-input type="text" name="stockCode" [(ngModel)]="stock" />
            </nz-input-group>-->
            <nz-input-group nzPrefixIcon="anticon anticon-lock" nzSm="6">
              <input nz-input type="text" name="stockCode" [(ngModel)]="stock" placeholder="请输入您的股票代码" />
            </nz-input-group>
            <p>价格:{{priceQuote.price|number:'2.2-2'}}</p>
            <hr />
            <app-order [stockCode]="stock" (priceChange)="priceQuoteHandler($event)"></app-order>
          </div>
          <div nz-col nzSpan="12">
            <input nz-input type="text" name="stockCode" [(ngModel)]="stock" />
            <p>价格:{{priceQuote.price|number:'2.2-2'}}</p>
            <hr />
            <app-order [stockCode]="stock" (priceChange)="priceQuoteHandler($event)"></app-order>
          </div>
        </div>
        <nz-divider></nz-divider>
        <div nz-row>
          <div nz-col nzSpan="4">
            <nz-card nzTitle="Google" nzBordered="true">
              <p>{{googlePriceQuote.stockCode}}</p>
              <p>{{googlePriceQuote.price}}</p>
            </nz-card>
          </div>
          <nz-divider></nz-divider>
          <div nz-col nzSpan="24">
            <app-price-quote (priceQuotedEvent)="priceQuotedEventHandler($event)"></app-price-quote>
          </div>
        </div>
        <nz-divider></nz-divider>
        <div nz-row>
          <div nz-col nzSpan="12">
            <nz-pagination nzPageIndex="1" nzTotal="500" nzShowSizeChanger nzPageSize="20" nzShowQuickJumper></nz-pagination>
            <nz-steps>
              <nz-step nzTitle="First" nzDescription="This is the first step."></nz-step>
              <nz-step nzTitle="Second" nzDescription="This is the Second step."></nz-step>
              <nz-step nzTitle="End" nzDescription="This is the last step."></nz-step>
            </nz-steps>
            <table nz-table>
              <thead>
                <tr>
                  <th>id</th>
                  <th>Name</th>
                  <th>Age</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <nz-divider nzText="form" nzOrientation="left"></nz-divider>
        <div nz-row>
          <div nz-col nzSpan="12">
            <form action="/" method="post" nz-form>
              <nz-form-item>
                <nz-form-label nzSm="6">用户名</nz-form-label>
                <nz-form-control nzSm="6">
                  <input type="text" name="name" value="" nz-input />
                </nz-form-control>
              </nz-form-item>
            </form>
          </div>
        </div>
        <nz-divider nzText="AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,ngContent" nzOrientation="left"></nz-divider>
        <div nz-row>
          <div nz-col nzSpan="24">

            <app-child #child1>
              <header class="header">App header.</header>
              <footer class="footer">App footer.</footer>
            </app-child>
            <!--<app-child #child2></app-child>-->
          </div>
        </div>
        <nz-divider nzText="OnDestroy"></nz-divider>
        <div nz-row>
          <div nz-col nzSpan="24">
            <a [routerLink]="['/order']">order</a>
            <nz-divider></nz-divider>
            <a [routerLink]="['/child']">child</a>
          </div>
          <div nz-col nzSpan="24">
            <router-outlet></router-outlet>
          </div>
        </div>
        <nz-divider nzText="Autocomplete"></nz-divider>
        <div nz-col>
          <div nz-row nzSpan="3">
            <input type="text" nz-input name="auto" nzAutocomplete="auto" value="" />
            <nz-autocomplete #auto>
              <nz-auto-option nzValue="1">1</nz-auto-option>
            </nz-autocomplete>
          </div>
        </div>
        <nz-divider nzText="courousel"></nz-divider>
        <div nz-col>
          <nz-carousel style="width:320px;" nzSm>
            <div nz-carousel-content><img src="http://placehold.it/320x150" alt="Alternate Text" /></div>
            <div nz-carousel-content><img src="http://placehold.it/320x150" alt="Alternate Text" /></div>
            <div nz-carousel-content><img src="http://placehold.it/320x150" alt="Alternate Text" /></div>
          </nz-carousel>
        </div>
        <nz-divider nzText="tab"></nz-divider>
        <div nz-col>
          <nz-tabset>
            <nz-tab nzTitle="tab1">1</nz-tab>
            <nz-tab nzTitle="tab1">1</nz-tab>
            <nz-tab nzTitle="tab1">1</nz-tab>
          </nz-tabset>
        </div>
        <nz-divider nzText="tag"></nz-divider>
        <div nz-col>
          <nz-tag nzMode="closeable">dotnetcore</nz-tag>
          <button type="button" nz-button nzType="success" nz-popover nzTitle="dotnetcore" nzContent="dotnetcore">点击</button>
        </div>
        <nz-divider nzText="timeline"></nz-divider>
        <div nz-col>
          <nz-timeline>
            <nz-timeline-item>1</nz-timeline-item>
            <nz-timeline-item>1</nz-timeline-item>
            <nz-timeline-item>1</nz-timeline-item>
            <nz-timeline-item>1</nz-timeline-item>
          </nz-timeline>
        </div>
        <nz-divider nzText="tooltip"></nz-divider>
        <div nz-col>
          <a href="https://www.baidu.com" nz-tooltip nzTitle="百度">百度</a>
        </div>
        <nz-divider nzText="tree"></nz-divider>
        <div nz-col>
          <nz-tree [(ngModel)]="data"></nz-tree>
        </div>
        <nz-divider nzText="Alert"></nz-divider>
        <div nz-col>
          <nz-alert nzMessage="alert" nzType="success" nzDescription="This is an alert message."></nz-alert>
        </div>
        <nz-divider nzText="Message"></nz-divider>
        <div nz-col>
          <button type="button" nz-button nzType="primary" (click)="sendMessage($event)">点击SendMessage</button>
          <button type="button" nz-button nzType="success" nz-popconfirm nzTitle="确认" nzContent="确认删除吗？" (nzOnConfirm)="alert('ok')" (nzOnCancel)="alert('cancel')">点击开启popconfirm</button>
          <nz-modal nzTitle="modal" [nzVisible]="isVisible" (nzOnOk)="this.isVisible=false" (nzOnCancel)="this.isVisible=false">
            <p>This is a description.</p>
          </nz-modal>
        </div>
        <nz-divider nzText="Progress"></nz-divider>
        <div nz-col>
          <nz-progress nzType="circle" [nzPercent]="percent"></nz-progress>
          <p>进度条：{{percent}}</p>
          <button type="button" nz-button (click)="this.percent=this.percent+10" nzShape="circle"><i class="anticon anticon-plus"></i></button>
          <button type="button" nz-button (click)="this.percent=this.percent-10"><i class="anticon anticon-minus"></i>减少</button>
        </div>
        <nz-divider nzText="Spin"></nz-divider>
        <div nz-col>
          <nz-spin></nz-spin>
        </div>
      </nz-content>
    </nz-layout>
  </nz-layout>
  <hr />
  <nz-back-top></nz-back-top>
  <nz-footer>
    <p style="text-align:center">&copy;2018 凤凰新华 版权所属</p>
  </nz-footer>
</nz-layout>

